// 获取popup元素
const popup = $('.popup-page');
// 获取img元素
const img = $('.qr-code-pic');
// 获取textarea元素
const textarea = $('.qr-code-edit');
// 获取canvas元素
const canvas = $('#qr-code-dom');
// 获取canvas上下文
const ctx = canvas.getContext('2d');

const setQRCode = (data = '') => {
  if (!data) return;
  try {
    // 获取uQRCode实例
    const qr = new UQRCode();
    // 设置二维码内容
    qr.data = data;
    // 设置二维码大小，必须与canvas设置的宽高一致
    qr.size = 250;
    // 设置二维码前景色。
    qr.foregroundColor = '#1e4150';
    // 调用制作二维码方法
    qr.make();
    // 设置uQRCode实例的canvas上下文
    qr.canvasContext = ctx;
    // 调用绘制方法将二维码图案绘制到canvas上
    qr.drawCanvas();
    const qrcode = canvas.toDataURL();
    const image = new Image();
    image.onload = () => {
      const { width, height } = canvas;
      ctx.clearRect(0, 0, width, height);
      ctx.fillStyle = '#3de697bf';
      ctx.fillRect(95, 95, 155, 155);
      ctx.drawImage(image, 0, 0);
      img.src = canvas.toDataURL();
    };
    image.src = qrcode;
    img.onload = () => {
      if (document.getElementsByClassName('popup-page-show').length) return;
      popup.classList.add('popup-page-show');
    };
  } catch (err) {}
};

// 设置输入框内容
const setInputValue = (value) => {
  textarea.value = value;
  textarea.focus();
  const index = value.length;
  textarea.setSelectionRange(index, index);
};

window.onload = () => {
  // 获取打开插件窗口的url地址
  chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
    const { url = '' } = tabs[0] || {};
    if (url) {
      let { qrcode = '' } = parseUrl(url).params;
      try {
        qrcode = decodeURIComponent(qrcode);
      } catch (err) {}
      const path = qrcode || url || '';
      setQRCode(path);
      setInputValue(path);
    }
  });

  // 输入框值改变重新生成二维码
  textarea.oninput = debounce(() => setQRCode(textarea.value));

  // 读取剪切板二维码内容
  document.addEventListener(
    'paste',
    throttling((e) => {
      const clipboard = e.clipboardData || window.clipboardData;
      // 获取粘贴的图片对象
      const file = clipboard.files[0];
      // 如果没有图片则退出
      if (!file) return;
      // 判断是否是图片类型
      if (!/^image\/[jpeg|png|gif|jpg]/.test(file.type)) return;
      // 读取成base64
      const reader = new FileReader();
      // 监听读取完成
      reader.onload = () => (img.src = reader.result);
      reader.readAsDataURL(file);
      textarea.blur();
      qrcodeParser(file)
        .then(setInputValue)
        .catch(() => setInputValue('识别二维码失败，请确认二维码是否正确！'));
    }),
  );
};
